<template>
  <div>
    <div>
      <el-tag @click="handleAdd()">新增</el-tag>
    </div>

    <el-table
      :data="
        tableData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column
        label="用户编号"
        prop="uid"
        width="100"
      ></el-table-column>

      <el-table-column label="登录名" prop="uname"> </el-table-column>

      <el-table-column label="真实姓名" prop="realName"></el-table-column>

      <el-table-column label="手机号" prop="tel"></el-table-column>

      <el-table-column label="邮箱" prop="email"></el-table-column>

      <el-table-column prop="code" label="禁用/启用">
        <template slot-scope="scope">
          <el-tooltip
            :content="
              scope.row.realName + '当前状态: ' + scope.row.code
            "
            placement="top"
          >
            <el-switch
              v-model="scope.row.code"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="启用"
              inactive-value="禁用"
              @change="stateChange(scope.row)"
            >
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="220">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column align="right">
        <template slot="header">
          <!-- slot-scope="scope" -->
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px; margin-left: 0px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])"
        >全选</el-button
      >
      <el-button @click="toggleSelection()">取消选择</el-button>
      <div class="block" align="center" style="margin-top: 25px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 修改的模态框 -->
    <el-dialog title="个人信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="登录名" :label-width="formLabelWidth">
          <el-input v-model="form.uname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="真实姓名" :label-width="formLabelWidth">
          <el-input v-model="form.realName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUser()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 增加的模态框 -->
    <el-dialog title="个人信息" :visible.sync="adddialogFormVisible">
      <el-form :model="addform" :rules="rules">
        <el-form-item
          label="登录名"
          :label-width="addformLabelWidth"
          prop="uname"
        >
          <el-input
            v-model="addform.uname"
            placeholder="请设置用户名"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="密码"
          :label-width="addformLabelWidth"
          prop="password"
        >
          <el-input
            type="password"
            v-model="addform.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="真实姓名"
          :label-width="addformLabelWidth"
          prop="realName"
        >
          <el-input v-model="addform.realName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="手机号"
          :label-width="addformLabelWidth"
          prop="tel"
        >
          <el-input
            v-model="addform.tel"
            autocomplete="off"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="邮箱"
          :label-width="addformLabelWidth"
          prop="email"
        >
          <el-input
            v-model="addform.email"
            autocomplete="off"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adddialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          uid: 1,
          createTime: "2016-05-02",
          uname: "王小虎",
          realName: 1,
          tel: "18899997777",
          email: "123456@qq.com",
          stateCode: 1,
        },
      ],
      search: "",
      multipleSelection: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {
        uid: 1,
        uname: "xiaohu",
        realName: "王小虎",
        tel: "18899997777",
        email: "123456@qq.com",
        stateCode: "1",
        index: "",
      },
      adddialogFormVisible: false,
      addformLabelWidth: "120px",
      addform: {
        uname: "xiaohu",
        realName: "王小虎",
        tel: "18899997777",
        email: "123456@qq.com",
        stateCode: "1",
      },
      rules: {
        uname: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 4, max: 6, message: "长度在 4 到 6 个字符", trigger: "blur" },
        ],
        stateCode: [{ required: true, message: "请选择状态", tigger: "blur" }],
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 5 到 5 个字符", trigger: "blur" },
        ],
      },
      currentPage: 1,
      pageSize: 5,
      total: 100,
    };
  },
  created: function () {
    //页面用户列表初始化
    this.$axios
      .get("users?page=" + this.currentPage + "&pageSize=" + this.pageSize)
      .then((res) => {
        if (res.data.statusCode == 200) {
          this.tableData = res.data.info;
          this.total = res.data.countInfo;
          //console.log(this.tableData);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.form = row;
      this.form.index = index;
      this.dialogFormVisible = true;
    },

    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm(
        "此操作将永久删除" + row.uname + "的信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$axios
            .delete("delUser?uid=" + row.uid)
            .then((res) => {
              if (res.data.statusCode == 200) {
                //更新表单???
                console.log(res.data.msg);
                this.tableData.splice(index, 1);
                this.$message({ message: "删除成功", type: "success" });
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleAdd() {
      this.adddialogFormVisible = true;
    },

    updateUser: function () {
      //使用axios向后端发出put请求
      this.$axios
        .put("updateUser", this.form)
        .then((res) => {
          if (res.data.statusCode == 200) {
            //更新表单???
            //console.log(res.data.msg);
            this.dialogFormVisible = false;
            this.$message({ message: "修改用户成功", type: "success" });
          } else {
            this.$message.error("修改用户失败");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    addUser: function () {
      this.$axios
        .post("addUser", this.addform)
        .then((res) => {
          if (res.data.statusCode == 200) {
            console.log(res.data.msg);
            //向页面追加数据
            //this.tableData.push(res.data.info);
            this.$set(this.tableData, this.tableData.length, res.data.info);
            //console.log(this.tableData);
            this.adddialogFormVisible = false;
            this.$message({ message: "添加用户成功", type: "success" });
          } else {
            this.$message.error("添加用户失败");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    stateChange(row) {
      // console.log(row);
      // console.log(code);
      // console.log( row.state.statusText);
      // console.log(index);
      if (row.code == "启用") {
        row.stateCode = 1;
      } else {
        row.stateCode = 0;
      }
      this.$axios
        .put("changeUserState", {
          uid: row.uid,
          stateCode: row.stateCode,
        })
        .then((res) => {
          if (res.data.statusCode == 200) {
            this.$message({
              message:
                row.realName + "成功修改为" + row.code+ "状态",
              type: "success",
            });
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("修改异常，即将刷新！");
          setTimeout(() => {
            location.reload();
          }, 2000);
        });
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.$axios
        .get("users?page=" + this.currentPage + "&pageSize=" + this.pageSize)
        .then((res) => {
          if (res.data.statusCode == 200) {
            this.tableData = res.data.info;
            this.total = res.data.countInfo;
          }
        });
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.$axios
        .get("users?page=" + this.currentPage + "&pageSize=" + this.pageSize)
        .then((res) => {
          if (res.data.statusCode == 200) {
            this.tableData = res.data.info;
            this.total = res.data.countInfo;
          }
        });
    },
  },
};
</script>
<style scoped>
#app {
  line-height: 14px;
}
</style>